<script setup>
  import { ref, toRefs, defineExpose } from 'vue';
  import { useDrawerStore } from '@/store/drawerDataStores.js';
  import { message } from '@/utils/message';

  const baudRateList = ref([
      {
        value: "4800",
        label: "4800"
      },
      {
        value: "9600",
        label: "9600"
      },
      {
        value: "14400",
        label: "14400"
      },
      {
        value: "19200",
        label: "19200"
      }
      ,
      {
        value: "38400",
        label: "38400"
      },
      {
        value: "56000",
        label: "56000"
      },
      {
        value: "57600",
        label: "57600"
      },
      {
        value: "115200",
        label: "115200"
      },
      {
        value: "128000",
        label: "128000"
      },
      {
        value: "230400",
        label: "230400"
      },
      {
        value: "256000",
        label: "256000"
      },
  ]);
  const drawerStore = useDrawerStore();
  const props = defineProps({
    devVarTableSelectedItem: {
      type: Object,
      default() {
        return {}
      }
    },
    publicForm: {
      type: Object,
      default() {
        return {}
      }
    }
  });
  const { devVarTableSelectedItem, publicForm } = toRefs(props);
  const emit = defineEmits(['childFormObj']);

  const ruleFormPlcRef = ref(),
    ruleFormPlc = ref({
      baudRate: undefined, // 波特率
      dataBit: undefined, //数据位
      stopBit: undefined, //停止位
      verify: undefined, //校验
    }),
    ruleFormRef = ref(),
    ruleForm = ref({
      protocolType: undefined, // 协议类型
      protocolAddress: undefined, //协议地址
      protocolNumber: undefined, //协议数量
    }),
    ruleFormLeftRef = ref(),
    ruleFormLeft = ref({
      passiveIp: undefined
    }),
    tableData = ref([]);
  // 确定按钮
  const confirmClick = () => {
    if (ruleForm.value.protocolType && ruleForm.value.protocolAddress && ruleForm.value.protocolNumber) {
      // 检查数组中是否已经存在完全相同的对象
      let isDuplicate = tableData.value.some((obj) => {
        return  obj.protocolType === ruleForm.value.protocolType &&
                obj.protocolAddress === ruleForm.value.protocolAddress &&
                obj.protocolNumber === ruleForm.value.protocolNumber;
      });
      if (!isDuplicate) {
        tableData.value.push({
          protocolType: ruleForm.value.protocolType,
          protocolAddress: ruleForm.value.protocolAddress,
          protocolNumber: ruleForm.value.protocolNumber
        })
      }
    }
  };
  // 删除按钮
  const deleteClick = () => {
    if (selectedKey.value.length === 0) {
      message('请选择要删除的数据',{ type: 'warning'});
      return;
    }
    tableData.value = tableData.value.filter(row => !selectedKey.value.includes(row));
    selectedKey.value = [];
  };
  // table多选事件
  const selectedKey = ref([]);
  const handleSelectionChange = (keys) => {
    selectedKey.value = keys;
  };
  // 配置按钮
  const configClick = () => {
    if (selectedKey.value.length > 0 && ruleFormLeft.value.passiveIp && ruleFormPlc.value.baudRate &&
    ruleFormPlc.value.dataBit && ruleFormPlc.value.stopBit && ruleFormPlc.value.verify) {
      emit('childFormObj', { ...selectedKey.value[0], ...ruleFormLeft.value});
    } else {
      message('请填写所有的数据', { type: 'warning' });
    }
  };
  // 父组件调用清空函数
const clearVar = () => {
    ruleFormLeftRef.value.resetFields();
    ruleFormPlcRef.value.resetFields();
    ruleFormRef.value.resetFields();
    tableData.value = [];
  };
  // 父组件调用保存函数
  const saveStore = () => {
    drawerStore.ruleFormPlc = ruleFormPlc.value;
    drawerStore.ruleFormLeft = ruleFormLeft.value;
    drawerStore.tableData = tableData.value;
    drawerStore.RTUForm = ruleForm.value;
  };
  // 父组件调用赋值函数
  const copyStore = () => {
    if (devVarTableSelectedItem.value.state === 1) {
      ruleFormPlc.value = {
        baudRate: devVarTableSelectedItem.value.baudRate,
        dataBit: devVarTableSelectedItem.value.dataBit,
        stopBit: devVarTableSelectedItem.value.stopBit,
        verify: devVarTableSelectedItem.value.verify,
      }
      ruleFormLeft.value.passiveIp = devVarTableSelectedItem.value.passiveIp;
      ruleForm.value = {
        protocolType: devVarTableSelectedItem.value.protocolType,
        protocolAddress: devVarTableSelectedItem.value.protocolAddress,
        protocolNumber: devVarTableSelectedItem.value.protocolNumber,
      }
      tableData.value = [{
        protocolType: devVarTableSelectedItem.value.protocolType,
        protocolAddress: devVarTableSelectedItem.value.protocolAddress,
        protocolNumber: devVarTableSelectedItem.value.protocolNumber
      }];
    } else {
      ruleFormPlc.value = drawerStore.ruleFormPlc;
      ruleFormLeft.value = drawerStore.ruleFormLeft;
      tableData.value = drawerStore.tableData;
      ruleForm.value = drawerStore.RTUForm;
    }
  };
  defineExpose({
    clearVar,
    saveStore,
    copyStore
  });
</script>

<template>
  <div class="form-main">
    <el-form
      ref="ruleFormPlcRef"
      :model="ruleFormPlc"
      :inline="true"
      label-position="top"
    >
      <el-form-item label="波特率" prop="baudRate" style="width: 118px;margin-right: 20px;">
        <el-select
          v-model="ruleFormPlc.baudRate"
          placeholder="请选择波特率"
        >
          <el-option v-for="item in baudRateList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="数据位" prop="dataBit" style="width: 118px;margin-right: 20px;">
        <el-select
          v-model="ruleFormPlc.dataBit"
          placeholder="请选择数据位"
        >
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
          <el-option label="7" value="7" />
          <el-option label="8" value="8" />
        </el-select>
      </el-form-item>
      <el-form-item label="停止位" prop="stopBit" style="width: 118px;margin-right: 20px;">
        <el-select
          v-model="ruleFormPlc.stopBit"
          placeholder="请选择停止位"
        >
          <el-option label="1" value="1" />
          <el-option label="1.5" value="1.5" />
          <el-option label="2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="校验" prop="verify" style="width: 118px;margin-right: 0px;">
        <el-select
          v-model="ruleFormPlc.verify"
          placeholder="请选择校验"
        >
          <el-option label="None" value="None" />
          <el-option label="Odd" value="Odd" />
          <el-option label="Even" value="Even" />
          <el-option label="Mark" value="Mark" />
          <el-option label="Space" value="Space" />
        </el-select>
      </el-form-item>
    </el-form>
    <el-form
      ref="ruleFormLeftRef"
      :model="ruleFormLeft"
      :inline="false"
    >
      <el-form-item label="从站IP" prop="passiveIp">
        <el-input v-model="ruleFormLeft.passiveIp" clearable placeholder="请输入从站IP"></el-input>
      </el-form-item>
    </el-form>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :inline="true"
      label-position="top"
    >
      <el-form-item label="类型" prop="protocolType" style="width: 110px;margin-right: 20px;">
        <el-select
          v-model="ruleForm.protocolType"
          placeholder="请选择类型"
        >
          <el-option label="coil" value="coil" />
          <el-option label="register" value="register" />
        </el-select>
      </el-form-item>
      <el-form-item label="地址" prop="protocolAddress" style="width: 110px;margin-right: 20px;">
        <el-input v-model="ruleForm.protocolAddress" placeholder="请输入地址"></el-input>
      </el-form-item>
      <el-form-item label="数量" prop="protocolNumber" style="width: 110px;margin-right: 20px;">
        <el-input v-model="ruleForm.protocolNumber" placeholder="请输入数量"></el-input>
      </el-form-item>
      <el-form-item style="width: 50px;">
        <el-button type="primary" class="form-btn" @click="confirmClick">确定</el-button>
      </el-form-item>
      <el-form-item style="width: 50px;margin-right: 0px;">
        <el-button type="primary" class="form-btn" @click="deleteClick">删除</el-button>
      </el-form-item>
    </el-form>
    <div class="form-table">
      <el-table
        ref="multipleTableRef"
        class="custom-table"
        :data="tableData"
        border
        stripe
        max-height="200"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column prop="protocolType" label="类型" align="center"></el-table-column>
        <el-table-column prop="protocolAddress" label="地址" align="center"></el-table-column>
        <el-table-column prop="protocolNumber" label="数量" align="center"></el-table-column>
      </el-table>
    </div>
    <div class="config-btn">
      <el-button type="primary" @click="configClick">配置</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .form-btn {
    margin-top: 30px;
  }

  .form-table {
    padding-bottom: 20px;
  }

  .config-btn {
    text-align: right;
  }
</style>
